<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外网首页</title>
    <link rel="stylesheet" href="src/images/reset.css">
    <link rel="stylesheet" href="src/css/idangerous.swiper2.7.6.css">
    <link rel="stylesheet" href="src/css/home.css">
    <link rel="stylesheet" href="src/css/animate.min.css">
</head>
<body>
    <div class="page-home-net">
        <!-- logo-导航 -->
        <div class="page-top-wrap">
            <!--头部-->
            <div class="header-wrap">
                <div class="banxin header">
                    <div class="fl header-logo">
                        <img src="./src/images/logo.png" alt="" class="logo">
                        <span class="header-name">天津市港口统一收费服务平台</span>
                    </div>
                    <div class="fr header-logreg">
                        <a href="###">登录</a><span class="line"> |</span><a href="###" class="active">注册</a>
                    </div>
                </div>
            </div>
            <!--导航-->
            <div class="nav-wrap">
                <div class="banxin nav clearfix">
                    <ul class="nav-list clearfix fl">
                        <li><a href="###" class="active">首页</a></li>
                        <li><a href="###">工作动态</a></li>
                        <li><a href="###">港口资讯</a></li>
                        <li><a href="###">收费目录</a></li>
                        <li><a href="###">业务办理</a></li>
                        <li><a href="###">服务指南</a></li>
                    </ul>
                    <div class="search fr">
                        <input type="text" placeholder="输入搜索的内容">
                        <div class="icon-search">
                            <img src="src/images/search.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--轮播图-->
        <div class="swiper-container banner-wrap">
          <div class="swiper-wrapper">
            <div class="swiper-slide slide1">
                <img src="src/images/banner.png" alt="">
            </div>
            <div class="swiper-slide slide2">
                <img src="src/images/banner.png" alt="">
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <!-- 最新通知 -->
        <div class="notice-wrap">
            <div class="banxin notice">
                <p class="title-txt">最新通知</p>
            </div>
        </div>
        <!--业务-->
        <div class="business-wrap">
            <div class="banxin business">
                <div class="title">业务办理</div>
                <div class="subTitle">着力推进“互联网+政务服务”简化办理流程，随着业务“一次缴费全港通行”的推进，让缴费人真切感受到改革带来的便利。</div>
                <div class="business-list clearfix">
                    <div class="business-item-box business-item-box1">
                        <div class="item-icon">
                            <img src="src/images/business1.png" alt="">
                        </div>
                        <div class="business-item business-item1">
                            <div class="item-title">业务缴费</div>
                            <div class="item-subTitle">快速便捷缴费服务</div>
                            <div class="item-operation">快速办理</div>
                        </div>
                    </div>
                    <div class="business-item-box business-item-box2">
                        <div class="item-icon ">
                            <img src="src/images/business2.png" alt="">
                        </div>
                        <div class="business-item business-item2">

                            <div class="item-title">业务收费</div>
                            <div class="item-subTitle">快速查看收费服务</div>
                            <div class="item-operation">快速办理</div>
                        </div>
                    </div>
                    <div class="business-item-box business-item-box3">
                        <div class="item-icon">
                            <img src="src/images/business3.png" alt="">
                        </div>
                        <div class="business-item business-item3">

                            <div class="item-title">作业放行</div>
                            <div class="item-subTitle">一键查看通关放行</div>
                            <div class="item-operation">快速办理</div>
                        </div>
                    </div>
                    <div class="business-item-box business-item-box4">
                        <div class="item-icon">
                            <img src="src/images/business4.png" alt="">
                        </div>
                        <div class="business-item business-item4">

                            <div class="item-title">收费项目</div>
                            <div class="item-subTitle">缴费清单一目了然</div>
                            <div class="item-operation">快速办理</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--数据服务-->
        <div class="server-wrap">
            <div class="banxin server">
                <div class="server-title">数据服务</div>
                <div class="server-subTitle">数据服务数据服务数据服务数据服务数据服务数据服务</div>
                <div class="server-content clearfix">
                    <!--echarts图表-->
                    <div class="content-echarts fl">
                       <!-- 柱状图 -->
                       <div class="echarts-column fl">
                            <!-- 柱状图标题 -->
                            <div class="echarts-column-title clearfix">
                                <div class="fl"><span>港口进出关</span><span class="title-tips">最近十个月数据</span></div>
                                <div class="e-sort fr">
                                    <span class="e-sort-item"><i class="e-sort-icon e-sort-icon01"></i>放行项目</span>
                                    <span class="e-sort-item"><i class="e-sort-icon e-sort-icon02"></i>放行项目</span>
                                    <span class="e-sort-item"><i class="e-sort-icon e-sort-icon03"></i>放行项目</span>
                                </div>
                            </div>
                            <!-- 柱状图展示 -->
                            <div class="echarts-column-main">
                                <!-- 展示区 -->
                                <div class="view">
                                    <div class="swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <img src="src/images/echarts-column-img.png" alt="">
                                            </div>
                                            <div class="swiper-slide">
                                                <img src="src/images/echarts-column-img.png" alt="">
                                            </div>
                                            <div class="swiper-slide">
                                                <img src="src/images/echarts-column-img.png" alt="">
                                            </div>
                                            <div class="swiper-slide">
                                                <img src="src/images/echarts-column-img.png" alt="">
                                            </div>
                                            <div class="swiper-slide">
                                                <img src="src/images/echarts-column-img.png" alt="">
                                            </div>
                                            <div class="swiper-slide">
                                                <img src="src/images/echarts-column-img.png" alt="">
                                            </div>
                                            <div class="swiper-slide">
                                                <img src="src/images/echarts-column-img.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 年份区 -->
                                <div class="preview">
                                    <span class="arrow-left"><</span>
                                    <span class="arrow-right">></span>
                                    <div class="swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide active-nav">
                                                <i class="e-c-dotted"></i><span class="e-c-year">2010</span>
                                            </div>
                                            <div class="swiper-slide">
                                                <i class="e-c-dotted"></i><span class="e-c-year">2011</span>
                                            </div>
                                            <div class="swiper-slide">
                                                <i class="e-c-dotted"></i><span class="e-c-year">2012</span>
                                            </div>
                                            <div class="swiper-slide">
                                                <i class="e-c-dotted"></i><span class="e-c-year">2013</span>
                                            </div>
                                            <div class="swiper-slide">
                                                <i class="e-c-dotted"></i><span class="e-c-year">2014</span>
                                            </div>
                                            <div class="swiper-slide">
                                                <i class="e-c-dotted"></i><span class="e-c-year">2015</span>
                                            </div>
                                            <div class="swiper-slide">
                                                <i class="e-c-dotted"></i><span class="e-c-year">2016</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                       </div>
                       <!-- 饼状图 -->
                       <div class="echarts-pie fl">
                            <!-- 饼状图展示区 -->
                            <div class="echarts-pie-img">
                                <img src="src/images/echarts-pie-img.png" alt="">
                            </div>
                            <!-- 饼状图标注 -->
                            <div class="e-sort">
                                <span class="e-sort-item"><i class="e-sort-icon e-sort-icon01"></i>放行业务：2000,00 </span>
                                <span class="e-sort-item"><i class="e-sort-icon e-sort-icon02"></i>缴费业务：2000,00 </span>
                                <span class="e-sort-item"><i class="e-sort-icon e-sort-icon03"></i>通关业务：2000,00 </span>
                            </div>
                       </div>
                       <div class="clearfix"></div>
                    </div>
                    <!--收费项目查询-->
                    <div class="data-search fr">
                        <div class="nav">
                            <span class="active">收费项目查询</span>
                        </div>
                        <div class="search-form">
                            <div class="search-form-label">收费项目名称</div>
                            <div class="search-form-input">
                                <input type="text" placeholder="请输入收费项目名称">
                            </div>
                            <div class="search-form-label">发布时间</div>
                            <div class="search-form-input">
                                <input type="text" placeholder="请输入发布时间">
                            </div>
                            <div class="search-form-operation">
                                <div class="search-form-button  buttton-primary">查询</div>
                                <div class="search-form-button">重置</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--工作动态-->
        <div class="dynamic-wrap">
            <div class="banxin dynamic">
                <div class="dynamic-title">工作动态</div>
                <div class="dynamic-subTitle">数据服务数据服务数据服务数据服务数据服务数据服务</div>
                <div class="dynamic-content clearfix">
                    <!--新政策-->
                    <div class="dynamic-policy fl">
                        <div class="dynamic-policy-nav">
                            <div class="nav-item active">新政策</div>
                            <div class="nav-more fr"><a href=""><span class="nav-more-txt">更多</span><img src="src/images/more2.png" alt="" class="nav-more-icon"></a></div>
                        </div>
                        <div class="dynamic-policy-content">
                            <div class="dynamic-policy-images">
                                <img src="src/images/dynamic-policy-img01.jpg" alt="">
                                <img src="src/images/dynamic-policy-img02.jpg" alt="">
                                <img src="src/images/dynamic-policy-img03.jpg" alt="">
                            </div>
                            <ul class="dynamic-policy-list">
                                <li>
                                    <div class="icon-list fl"><img src="src/images/dynamic-icon1.png" alt=""></div>
                                    <div class="fl content">通知通知通知通知通知通知通知通知通知通知</div>
                                    <div class="fr time">2018-09-08</div>
                                </li>
                                <li>
                                    <img src="src/images/dynamic-icon1.png" alt="" class="icon-list fl">
                                    <div class="fl content">通知通知通知通知通知通知通知通知通知</div>
                                    <div class="fr time">2018-09-08</div>
                                </li>
                                <li>
                                    <img src="src/images/dynamic-icon1.png" alt="" class="icon-list fl">
                                    <div class="fl content">通知通知通知通知通知通知通知通知通知</div>
                                    <div class="fr time">2018-09-08</div>
                                </li>
                                <li>
                                    <img src="src/images/dynamic-icon1.png" alt="" class="icon-list fl">
                                    <div class="fl content">通知通知通知通知通知通知通知通知通知</div>
                                    <div class="fr time">2018-09-08</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--价格动态-->
                    <div class="dynamic-policy dynamic-price fr">
                        <div class="dynamic-policy-nav">
                            <div class="nav-item active">价格动态</div>
                            <div class="nav-more fr"><a href=""><span class="nav-more-txt">更多</span><img src="src/images/more1.png" alt="" class="nav-more-icon"></a></div>
                        </div>
                        <div class="dynamic-policy-content">
                            <div class="dynamic-policy-images">
                                <img src="src/images/dynamic-price-img01.jpg" alt="">
                                <img src="src/images/dynamic-price-img02.jpg" alt="">
                                <img src="src/images/dynamic-price-img03.jpg" alt="">
                            </div>
                            <ul class="dynamic-policy-list">
                                <li>
                                    <img src="src/images/dynamic-icon2.png" alt="" class="icon-list fl">
                                    <div class="fl content">通知通知通知通知通知通知通知通知通知</div>
                                    <div class="fr time">2018-09-08</div>
                                </li>
                                <li>
                                    <img src="src/images/dynamic-icon2.png" alt="" class="icon-list fl">
                                    <div class="fl content">通知通知通知通知通知通知通知通知通知</div>
                                    <div class="fr time">2018-09-08</div>
                                </li>
                                <li>
                                    <img src="src/images/dynamic-icon2.png" alt="" class="icon-list fl">
                                    <div class="fl content">通知通知通知通知通知通知通知通知通知</div>
                                    <div class="fr time">2018-09-08</div>
                                </li>
                                <li>
                                    <img src="src/images/dynamic-icon2.png" alt="" class="icon-list fl">
                                    <div class="fl content">通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知</div>
                                    <div class="fr time">2018-09-08</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--服务指南-->
        <div class="guide-wrap">
            <div class="guide banxin">
                <div class="guide-title">服务指南</div>
                <div class="guide-subTitle">加强行业法制建设,建立公正、公平、公开的市场秩序,为会员单位提供便利服务指南,快速便捷掌握平台内容。</div>
                <div class="guide-content">
                    <div class="guide-image-text fl">
                        <div class="guide-item guide-item1">
                            <div class="guide-item-title">
                                <img src="src/images/guide-title1.png" alt="" class="item-mark">
                                <div class="guide-item-title-text">银行办理</div>
                            </div>
                            <div class="list">
                                <div class="list-item">
                                    <img src="src/images/guide-icon1.png" alt="" class="list-icon">
                                    <span>开户网点查询</span>
                                </div>
                                <div class="list-item">
                                    <img src="src/images/guide-icon1.png" alt="" class="list-icon">
                                    <span>支持银行列表</span>
                                </div>
                                <div class="list-item">
                                    <img src="src/images/guide-icon1.png" alt="" class="list-icon">
                                    <span>监管账户办理</span>
                                </div>
                            </div>
                            <div class="guide-more">
                                <a href=""><span>更多</span>
                                <img src="./src/images/more1.png" alt="" class="more-icon"></a>
                            </div>
                        </div>

                        <div class="guide-item guide-item2">
                            <div class="guide-item-title">
                                <img src="src/images/guide-title2.png" alt="" class="item-mark">
                                <div class="guide-item-title-text">缴费
                                    流程</div>
                            </div>
                            <div class="list">
                                <div class="list-item">
                                    <img src="src/images/guide-icon2.png" alt="" class="list-icon">
                                    <span>及时准确通知</span>
                                </div>
                                <div class="list-item">
                                    <img src="src/images/guide-icon2.png" alt="" class="list-icon">
                                    <span>平台缴费流程</span>
                                </div>
                                <div class="list-item">
                                    <img src="src/images/guide-icon2.png" alt="" class="list-icon">
                                    <span>缴费全程跟踪</span>
                                </div>
                            </div>
                            <div class="guide-more">
                                <a href="">
                                    <span>更多</span>
                                    <img src="./src/images/more2.png" alt="" class="more-icon">
                                </a>
                            </div>
                        </div>

                        <div class="guide-item guide-item3">
                            <div class="guide-item-title">
                                <img src="src/images/guide-title3.png" alt="" class="item-mark">
                                <div class="guide-item-title-text">收费
                                    流程</div>
                            </div>
                            <div class="list">
                                <div class="list-item">
                                    <img src="src/images/guide-icon3.png" alt="" class="list-icon">
                                    <span>平台收费流程</span>
                                </div>
                                <div class="list-item">
                                    <img src="src/images/guide-icon3.png" alt="" class="list-icon">
                                    <span>快速便捷收费</span>
                                </div>
                                <div class="list-item">
                                    <img src="src/images/guide-icon3.png" alt="" class="list-icon">
                                    <span>及时准确通知</span>
                                </div>
                            </div>
                            <div class="guide-more">
                                <a href="">
                                    <span>更多</span>
                                    <img src="./src/images/more3.png" alt="" class="more-icon">
                                </a>
                            </div>
                        </div>

                        <div class="guide-item guide-item4">
                            <div class="guide-item-title">
                                <img src="src/images/guide-title4.png" alt="" class="item-mark">
                                <div class="guide-item-title-text">通关流程</div>
                            </div>
                            <div class="list">
                                <div class="list-item">
                                    <img src="src/images/guide-icon4.png" alt="" class="list-icon">
                                    <span>平台通关流程</span>
                                </div>
                                <div class="list-item">
                                    <img src="src/images/guide-icon4.png" alt="" class="list-icon">
                                    <span>通关时效性</span>
                                </div>
                                <div class="list-item">
                                    <img src="src/images/guide-icon4.png" alt="" class="list-icon">
                                    <span>及时准确通知</span>
                                </div>
                            </div>
                            <div class="guide-more">
                                <a href="">
                                    <span>更多</span>
                                    <img src="./src/images/more4.png" alt="" class="more-icon">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="guide-question fr">
                        <div class="guide-question-nav">
                            <div class="nav-item active">
                                热门问题
                            </div>

                        </div>
                        <!--列表-->
                        <ul class="guide-question-list">
                            <li>
                                <img src="src/images/guide-icon2.png" alt="" class="guide-item-icon">
                                <span class="content">一图了解放行过程及其其他</span>
                            </li>
                            <li>
                                <img src="src/images/guide-icon2.png" alt="" class="guide-item-icon">
                                <span class="content">一图了解放行过程及其他及其他</span>
                            </li>
                            <li>
                                <img src="src/images/guide-icon2.png" alt="" class="guide-item-icon">
                                <span class="content">一图了解放行过程及其他及其他</span>
                            </li>
                            <li>
                                <img src="src/images/guide-icon2.png" alt="" class="guide-item-icon">
                                <span class="content">一图了解放行过程及其他及其他</span>
                            </li>
                        </ul>
                        <!--知识宝库，了解我们-->
                        <div class="guide-link clearfix">
                            <div class="fl guide-knowledge guide-link-item">
                                <a href="">
                                    <img src="src/images/guide-question1.png" alt="">
                                    <span class="link-item-text">常见问题</span>
                                </a>
                            </div>
                            <div class="fr guide-know-us guide-link-item">
                                <a href="">
                                    <img src="src/images/guide-question2.png" alt="">
                                    <span class="link-item-text">平台介绍</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>

        <!--关于-->
        <div class="about-wrap">
            <div class="about banxin clearfix">
                <div class="about-us fl">
                    <div class="about-title">关于我们</div>
                    <div class="about-line"></div>
                    <ul>
                        <li>关于我们</li>
                        <li>服务条款</li>
                        <li>法律声明</li>
                        <li>友情链接</li>
                    </ul>
                </div>
                <div class="concat-us fl">
                    <div class="about-title">联系我们</div>
                    <div class="about-line"></div>
                    <ul>
                        <li>服务热线：011-1232211</li>
                        <li>地     址：天津市</li>
                        <li>技术支持：天津市</li>
                    </ul>
                </div>
                <div class="about-down fr">
                    <div class="about-title">移动端下载</div>
                    <div class="about-line"></div>
                    <div class="app-img">
                        <img src="src/images/app.png" alt="">
                        <div class="text">扫描二维码下载</div>
                    </div>
                </div>
            </div>
        </div>
        <!--版权-->
        <div class="copyright">津ICO备0112313131231 经营许可证：津102231023123</div>
    </div>

    <script src="src/js/jquery-1.10.1.min.js"></script>
    <script src="src/js/idangerous.swiper.min.js"></script>
    <script src="src/js/swiper.animate1.0.2.min.js"></script>
    <script src="src/js/jquery.cookie.js"></script>
    <script src="src/js/TJcommon.js"></script>
    <script language="javascript">
        // banner
        var mySwiper = new Swiper ('.banner-wrap', {
        pagination: '.swiper-pagination',
        paginationClickable :true,
        autoplay : 3000,
        loop: true,
        speed:300,
        autoplayDisableOnInteraction : false,
        onProgressChange: function(swiper){
        for (var i = 0; i < swiper.slides.length; i++){
        var slide = swiper.slides[i];
        var progress = slide.progress;
        var translate = progress*swiper.width;  
        var opacity = 1 - Math.min(Math.abs(progress),1);
        slide.style.opacity = opacity;
        swiper.setTransform(slide,'translate3d('+translate+'px,0,0)');
        }
        },
        onTouchStart:function(swiper){
        for (var i = 0; i < swiper.slides.length; i++){
        swiper.setTransition(swiper.slides[i], 0);
        }
        },
        onSetWrapperTransition: function(swiper, speed) {
        for (var i = 0; i < swiper.slides.length; i++){
        swiper.setTransition(swiper.slides[i], speed);
        }
        }
        });  

        // 柱状图切换
        var viewSwiper = new Swiper('.view .swiper-container', {
            onSlideChangeStart: function() {
                updateNavPosition()
            }
        })

        $('.preview .arrow-left').on('click', function(e) {
            e.preventDefault()
            if (viewSwiper.activeIndex == 0) {
                viewSwiper.swipeTo(viewSwiper.slides.length - 1, 1000);
                return
            }
            viewSwiper.swipePrev()
        })

        $('.preview .arrow-right').on('click', function(e) {
            e.preventDefault()
            if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
                viewSwiper.swipeTo(0, 1000);
                return
            }
            viewSwiper.swipeNext()
        })

        var previewSwiper = new Swiper('.preview .swiper-container', {
            visibilityFullFit: true,
            slidesPerView: 'auto',
            onlyExternal: true,
            onSlideClick: function() {
                viewSwiper.swipeTo(previewSwiper.clickedSlideIndex)
            }
        })

        function updateNavPosition() {
            $('.preview .active-nav').removeClass('active-nav')
            var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
            if (!activeNav.hasClass('swiper-slide-visible')) {
                if (activeNav.index() > previewSwiper.activeIndex) {
                    var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
                    previewSwiper.swipeTo(activeNav.index() - thumbsPerNav)
                } else {
                    previewSwiper.swipeTo(activeNav.index())
                }
            }
        }
    </script>
</body>
</html>